<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1. 引入JS文件-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">

</table>

<script>
    <!--2. 在brand.html页面绑定加载完毕事件，改时间是在页面加载完毕后触发    -->
    window.onload = function () {
        // 3. 发送异步请求
        axios({
            method: "get",
            url: "http://localhost:8080/web_20_jsonCase/selectAllServlet"
        }).then(function (resp){
            // 4. 处理响应数据
            //axios会自动将json数据转换成js对象
            let brands = resp.data;
            // 表格中的所有的 `tr` 拼接到一个字符串中
            // 然后使用 `document.getElementById("brandTable").innerHTML = 拼接好的字符串
            //就可以动态的展示出用户想看到的数据

            // JSON数据
            // [{"brandName":"三只松鼠","companyName":"三只松鼠股份有限公司","description":"好吃不上火","id":1,"ordered":5,"status":0},
            // {"brandName":"华为","companyName":"华为技术有限公司","description":"华为致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界","id":2,"ordered":100,"status":1},
            // {"brandName":"小米","companyName":"小米科技有限公司","description":"are you ok","id":3,"ordered":50,"status":1}]

            // 表头是固定的，先定义初始值是表头行数据的字符串
            let tableData = "<tr>\n" +
                    "<th>序号</th>\n" +
                    "<th>品牌名称</th>\n" +
                    "<th>企业名称</th>\n" +
                    "<th>排序</th>\n" +
                    "<th>品牌介绍</th>\n" +
                    "<th>状态</th>\n" +
                    "<th>操作</th>\n" +
                "</tr>";

            //遍历响应回来的数据brands，拿到每一条品牌数据
            for(let i = 0;i < brands.length; i++){
                let brand = brands[i];
                tableData +=  "\n" +
                    "<tr align=\"center\">\n" +
                        "<td>"+(i+1)+"</td>\n" +
                        "<td>" + brand.brandName + "</td>\n" +
                        "<td>" + brand.companyName + "</td>\n" +
                        "<td>" + brand.ordered + "</td>\n" +
                        "<td>" + brand.description + "</td>\n" +
                        "<td>" + brand.status + "</td>\n" +
                        "<td><a href=\"#\">修改</a> <a href= \"#\">删除</a></td>\n" +
                    "</tr>";
            }
            //设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }
</script>
</body>


</html>